<template>
	<view class="histroy pd-30">
		<view class="histroy-item" v-for="(item, index) in msgList" :key="index">
			<view class="ft fw-800 c-33">{{ item.created_at }}</view>
			<view class="flex mt-10" style="align-items: stretch;justify-content: space-between;">
				<view class="l">
					<view class="radius"></view>
					<view class="line"></view>
				</view>
				<view style="padding-bottom: 50rpx;">
					<view class="card mt-12 pd-24 ft">
						<view class="ft1 ">{{ '查看你分享'+item.tag_name+(item.share_info.name?'《'+item.share_info.name+'》':'')}}</view>
						<view class="ft c-99 mt-12">访问时长：<text class="c-bbq">{{ item.seconds_txt }}</text></view>
						<view class="btn mt-20 flex-center" @click="goContentDetail(item.share_info)">
							<text class="ft">查看分享内容</text>
							<image class="wh-24 ml-12" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="js" setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onShow,
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		utils
	} from "@/utils/utils.js";
	import {
		api
	} from "@/utils/api.js";

	//获取消息列表
	const msgPage = ref(1)
	const msgList = ref([])
	const msgLoading = ref(true)
	const getMsgListData = () => {
		if (!msgLoading.value) {
			return
		}
		uni.showLoading()
		msgLoading.value = false
		utils
			.request(
				api.shareDetail, {
					page: msgPage.value,
					pageSize: 10,
					user_id: user_id.value,
				},
				"get"
			)
			.then((res) => {
				const resData = res.data.data
				if (isInit.value == 1) {
					shareInfo.value = resData.share_info
					isInit.value = 0
				}
				msgPage.value++
				if (resData.items.length > 0) {
					msgList.value = msgList.value.concat(resData.items)
				}
				if (msgPage.value <= resData.pageInfo.totalPage) {
					msgLoading.value = true
				}
				uni.hideLoading()
			});
	};
	onReachBottom(() => {
		getMsgListData()
	})
	const user_id = ref('')
	const shareInfo = ref({})
	const isInit = ref(1)
	onLoad((options) => {
		user_id.value = options.user_id ? options.user_id : ''
		getMsgListData()
	})

	const goContentDetail = (info) => {
		if (info.product_id > 0) {
			//跳转到产品详情
			uni.navigateTo({
				url: `/subpackage/immigration/immigration?id=${info.product_id}`,
			});
		} else if (info.video_id > 0) {
			//跳转到视频详情
			uni.navigateTo({
				url: `/pages/category/category?id=${info.video_id}&isReback=true`,
			});
		} else if (info.sale_id > 0) {
			//跳转到老师详情
			uni.navigateTo({
				url: `/subpackage/teacher/teacherDetail?id=${info.sale_id}`,
			});
		} else if (info.case_id > 0) {
			//跳转到案例详情
			uni.navigateTo({
				url: `/subpackage/clinch/clinchDetail?id=${info.case_id}`,
			});
		}
	}
</script>

<style lang="scss" scoped>
	.histroy {
		.histroy-item {
			margin-top: 10rpx;

			.l {
				display: flex;
				flex-direction: column;
				align-items: center;

				.radius {
					width: 16rpx;
					height: 16rpx;
					background: #333333;
					border-radius: 50%;
					margin-bottom: 10rpx;
					flex-shrink: 0;
				}

				.line {
					height: 100%;
					width: 2rpx;
					background-color: #F1F1F1;
				}
			}
		}

		.histroy-item:first-child {
			margin-top: 0rpx;
		}

		.histroy-item:last-child {
			.line {
				display: none;
			}
		}
	}

	.card {
		width: 654rpx;
		// height: 198rpx;
		background: #F8F8F8;
		border-radius: 40rpx;

		.btn {
			width: 218rpx;
			height: 54rpx;
			background: #ffffff;
			border-radius: 20rpx;
		}
	}
</style>